<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="th" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/">
    <title>猫咪列表</title>
    <link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="static/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
</head>
<script>

    $(function () {
        find();
        $(".show").hide();
        $("#show").click(function () {
            $(".show").show().addClass("hide").removeClass("show");
            $("#show").hide();
            $("#hide").show();
        });
        $("#hide").hide().click(function () {
            $(".hide").hide().addClass("show").removeClass("hide");
            $("#hide").hide();
            $("#show").show();
        });
        $("#selectAll").click(function () {
            $(":checkbox[name='cno']").prop("checked", this.checked);
        });
        $('#addCat').on('hidden.bs.modal', function () {
            $('#addForm')[0].reset();
        });
        $('#editCat').on('hidden.bs.modal', function () {
            $('#editForm')[0].reset();
        });
    });

    function find(){
        $.ajax('cat/find',{
            type : 'get',
            success : function (resp) {
                var str = '';
                $.each(resp,function () {
                    str += '<tr>';
                    str += '<th><input type="checkbox" class="show">' + this.cno + '</th>';
                    str += '<th>' + this.cname + '</th>';
                    str += '<th>' + this.cage + '</th>';
                    str += '<th>' + this.species.sname + '</th>';
                    str += '<th>' + this.master + '</th>';
                    str += '<th>' + this.master + '</th>';
                    str += '<th><a href="javascript:getCat('+this.cno+')" class="btn btn-default">修改</a>&emsp;<a href="javascript:deleteCat('+this.cno+')" class="btn bg-danger" >删除</a></th>';
                    str += '</tr>';
                });
                $('#tb').html(str);
            }
        });
    }
    
    function getCat(cno) {
        $.ajax('cat/find/'+cno,{
            type: 'get',
            success : function (resp) {
                $('#edit_cno').val(resp.cno);
                $('#edit_cname').val(resp.cname);
                $('#edit_cage').val(resp.cage);
                $('#edit_species').val(resp.species.sname);
                $('#edit_master').val(resp.master);
                $('#editCat').modal('show');
            }
        });
    }

    function addCat() {
        $.ajax('cat/add',{
            type: 'post',
            success : function (resp) {
                $('#edit_cno').value=resp.cno;
                // $('#edit_cno').val(resp.cno);
                $('#edit_cname').val(resp.cname);
                $('#edit_cage').val(resp.cage);
                $('#edit_species').val(resp.species.sname);
                $('#edit_master').val(resp.master);
                $('#editCat').modal('show');
            }
        });
    };


    // alert(cat);
    
    function editCat() {
        var cat = {
            cno : $('#edit_cno').val(),
            cname : $('#edit_cname').val(),
            cage : $('#edit_cage').val(),
            species:{
                sno: 2
                // sname:$('#edit_species').val()
            },
            master : $('#edit_master').val(),
            image : null
        };
        var s = JSON.stringify(cat);
        $.ajax('cat/edit',{
            type : 'put',
            contentType : 'application/json',
            data : JSON.stringify(s),
            success : function (resp) {
               if (resp=='success'){
                   $('#editCat').modal('hide');
                   find();
               }else {
                   alert('修改失败！')
               }
            }
        });
    }

    function deleteCat(cno) {
        if (confirm('确定删除？')){
            $.ajax('cat/remove/'+cno,{
                type : 'delete',
                success : function (resp) {
                    if (resp==='success'){
                        find();
                    }else {
                        alert('删除失败！');
                    }
                }
            });
        }
    }

</script>
<body>
<div style="text-align: center">
    <h1>猫咪列表</h1>
    <button type="submit" id="hide">确认删除</button>
    <button type="button" id="show">批量删除</button>
    <a href="javascript:void(0)" class="btn btn-default" data-toggle="modal" data-target="#addCat">新增</a>
    <table class="table table-hover table-striped table-bordered">
        <thead>
        <tr>
            <th><input type="checkbox" id="selectAll" class="show">编号</th>
            <th>名字</th>
            <th>年龄</th>
            <th>品种</th>
            <th>主人</th>
            <th>照片</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tb"></tbody>
    </table>
</div>

<form id="deleteFrom" method="post">
    <input type="hidden" name="_method" value="delete">
</form>

<div class="modal fade" id="image" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    猫咪图片
                </h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">下载
                </button>
                <button type="button" class="btn btn-primary">
                    上传
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="addCat" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="addModalLabel">
                    猫咪信息
                </h4>
            </div>
            <form id="addForm" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-sm-4">猫咪名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add_cname" placeholder="名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4">猫咪年龄</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="add_cage" placeholder="年龄">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4">猫咪品种</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add_species" placeholder="品种">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4">猫咪主人</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add_master" placeholder="主人">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="addCat()">
                        提交更改
                    </button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="editCat" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="editModalLabel">
                    猫咪信息
                </h4>
            </div>
            <form id="editForm" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-sm-4">猫咪编号</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="edit_cno">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4">猫咪名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_cname" placeholder="名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4">猫咪年龄</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="edit_cage" placeholder="年龄">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4">猫咪品种</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_species" placeholder="品种">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4">猫咪主人</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_master" placeholder="主人">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="editCat()">
                        提交更改
                    </button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</body>
</html>